<template>
  <div>
    <h3>Item组件</h3>
    <p v-if="paramsId === '001'">CS简介</p>
    <p v-if="paramsId === '002'">DNF简介</p>
    <p v-if="paramsId === '003'">LOL简介</p>
  </div>
</template>

<script>
export default {
  name: "Item",
  data() {
    return {
      paramsId: "",
    };
  },
  watch: {
    //我们可以使用watch来监听动态路由的切换
    $route: {
      immediate: true,
      //不需要deep,因为动态路由切换的时候,直接替换的整个route对象
      handler() {
        console.log(this.$route);
        this.paramsId = this.$route.params.id;
      },
    },
  },
};
</script>

<style></style>
